@mycolor: teal;
@width: 2 + 5px - 3cm;
@first: 5%;
@second: @first * 2;
@base: 2px * 3cm;
@var: 50vh / 2;
@var1: 25vh - 20px;
// 转义旧语法
@min768: ~"(min-width: 768px)";
// 转义新语法
// @min86z8: (min-width: 868px);

.element {
  @media @min768 {
    width: @first;
  }
  // @media @min868 {
  //   width: @var1;
  // }
}

.first {
  margin-top: 10px;
  border-radius: 5px;
  // width: @width;
  // width: @base;
  // width: calc(50% + (@var - 20px));
  width: @var1;
  height: @second;

}

div {
  color: @mycolor;
  .first();

  & > ul {
    list-style: none;

    li:first-child {
      text-align: center;

      span {
        font-size: 20px;
      }
    }
  }
}
